import { useEffect, useState } from 'react'
import { Timeline } from 'antd';
import AppLayout from '../components/app-layout';
import style from '../styles/timeline.module.scss'
import Axios from '../services/request'
import { useRouter } from 'next/router';
import {formatDatetime} from '../utils/index';
// import Link from 'next/link'

export default function timeline() {
    const [lists, setLists] = useState([])
    const router = useRouter();
    
    const goDetail = (val) => {
        router.push(`/detail/[id]`, `/detail/${val}`);
    }
    useEffect(() => {
        let url = `/api/moment?page=1&size=50`
        Axios.get(url).then(res => {
            setLists(res.data.data)
        })
    }, [])
    return (
        <AppLayout>
            <div className="header_box"></div>
            <div className={style.timeLine}>
                <Timeline mode="alternate">
                    {
                        lists.map(item => (
                            <Timeline.Item className={style.item} key={item.id} label={formatDatetime(item.create_time,'yyyy-MM-dd hh:mm:ss')} onClick={e => goDetail(item.id)}>
                                {/* <Link href="/detail/[id]" as={`/detail/${item.id}`} > */}
                                <img src={item.img_url} alt="" />
                                <span>{item.title}</span>
                                {/* </Link> */}
                            </Timeline.Item>
                        ))
                    }
                </Timeline>
            </div>

        </AppLayout>
    )
}
